import { NavBar, Toast } from 'react-vant';
import './style/yanZheng.css'
import { useState,useRef, useEffect } from 'react'
import { useNavigate,useLocation } from 'react-router-dom';
import { Form,Button, Input } from 'react-vant';
import type { loginType } from '../../types/login'
import { handleYanZhengCode } from '../../utils/api'
const YanZheng: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const email = location.state?.email;
    const [form] = Form.useForm();
    const [formValues, setFormValues] = useState<loginType>({ code: '' });
    const [isLoading, setIsLoading] = useState(false);
    const YanZhen = (value: string) => {
        const guize = /^\d{6}$/
        const values = guize.test(value)
        if (values) {
            return true
        } else {
            return false
        }
    }
    const onFinish = async () => {
        if( !formValues.code) return;
        try{
            setIsLoading(true)
            Toast.loading({
                message: '正在验证...',
                forbidClick: true,  
                duration: 3000,
            })
            const params={
                email:email,
                code:formValues.code
            }
            let result = await handleYanZhengCode(params)
            Toast.clear()
            if( result.data.code === 200){
                Toast.success({
                    message:"验证成功",
                    forbidClick:true,
                })
                await new Promise(resolve => setTimeout(resolve, 1000))
                navigate('/newuser',{
                    state:{
                        email:email
                    }
                })
            }else{
                  // 显示错误提示，2秒后自动消失
               Toast.fail({
                message:result.data.error || '网络错误，请重试',
                forbidClick:true,
                duration:2000,
               })
            }
        }catch(err){
            console.log(err,'err');
            
        } finally{
            setIsLoading(false)
        }

    }
    const onValuesChange = (values:any) =>{
        setFormValues({...formValues,...values})
        console.log(values,'1');
    }
    useEffect(()=>{
        console.log(email)
    },[])
    return (
        <>
            <div className="yanzheng-box">
                <NavBar
                    title="验证你的电子邮件"
                    onClickLeft={() => {navigate('/register1')
                    }}
                />
                <div className="yanzheng-content">
                      <span className="yanzheng-span">我们刚刚临时验证码到<br/>{email}</span>
                      <Form
                        form={form}
                        onFinish={onFinish}
                        onValuesChange={onValuesChange}
                        footer={
                            <div style={{ margin: '16px 16px 0' }}>
                                <Button round nativeType='submit' type='primary' block
                                    loading={isLoading}
                                    disabled={!YanZhen(String(formValues.code))}
                                >
                                    继续
                                </Button>
                            </div>
                        }
                    >
                        <span className="parentBox-span">验证码</span>
                        <Form.Item
                            name='code'
                            rules={[{ pattern:/^\d{6}$/, message: '请输入正确的验证码' }]}
                        >
                            <Input placeholder='输入验证码' className="parentBox-input" />
                        </Form.Item>
                        <span className="parentBox-span1">我没有收到验证码？重新发送</span>
                    </Form>
                </div>
               
            </div>
        </>
    )
}
export default YanZheng;